<!--
 * @Description: 订单详情页
 * @Author: Fengqin
 * @Date: 2021-06-24 21:13:04
 * @LastEditors: Fengqin
 * @LastEditTime: 2021-06-28 14:37:47
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <div>
      <el-button type="primary" @click="$router.back()" plain>返回</el-button>
    </div>
    <div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="项目项编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="product.id"
            label="产品编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="product.name"
            label="产品">
          </el-table-column>
          <el-table-column
            prop="product.photo"
            label="产品图片">
            <template slot-scope="scope">
                              <el-image style="width: 50px; height: 40px"
                                :src="scope.row.product.photo" 
                                :preview-src-list="[scope.row.product.photo]">
                            </el-image>
                        </template>
          </el-table-column>
          <el-table-column
            prop="product.price"
            label="单价">
            <template slot-scope="scope">   
                <span ><svg t="1624619356606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4427" width="20" height="18"><path d="M841.5 631.1c-43.2-115.2-162.5-240.7-187.8-265l-0.9-0.9c-3-2.7-6.2-5.5-9.8-8.4-2.7-2.9-5.2-5.4-7.5-7.8 7.7 6.4 17.5 10.4 28.4 10.4 17.4 0 32.3-10.1 39.7-24.6 25.9 5.2 93.8 20 102.7 57.2 2.1 8.8 10 14.7 18.7 14.7 1.5 0 3-0.2 4.5-0.5 10.3-2.5 16.7-12.8 14.2-23.2-11.2-46.5-62.6-68-101.7-78.7 18.5-17.3 35.1-39.3 37-54.6 1.3-10.2-5.8-19-16-20.7-10.2-1.7-20 5.6-22.1 15.7-2.1 10-26.2 34.6-40.3 44.7-8.1-11.6-21.5-19.3-36.7-19.3-13.4 0-25.3 6-33.5 15.4 4.7-7 9.7-11.8 12.2-14 1.8-1.6 5.2-4.2 9.6-7.7 48.8-38.4 95.3-70.6 104.9-100.3 2.7-8.2 4.5-13.5 5.8-17 1.9-5.4 7.5-21.2-6.9-28.5-2.9-3.1-8.1-6.8-16.4-6.8-6.5 0-13 2.2-21.3 5-13.8 4.7-33 10-45.4 4.8-10.4-4.4-20.4-11.5-30.9-19-19.6-13.9-41.8-29.8-72.9-32-24.7-1.8-44.8 6.6-64 14.7-17.1 7.2-33.2 14-54.9 14h-0.1c-21.1-0.4-44.1-3.5-64.4-6.2-19.1-2.6-35.6-4.8-48.9-4.8-5.6 0-10.3 0.4-13.4 1.1-2-1.6-5.1-5.4-9.1-11.3-3.1-4.6-7.9-11.6-17.7-11.6-5.5 0-10.9 2.7-14.2 7.1-5.8 7.7-5.5 9 4.2 43.2l1.4 4.9c0.3 1.1 0.6 3.1 1.1 5.8 3.4 19.2 11.5 56.8 33 80.2 3 3.8 6.3 7.9 9.9 12.3 16.5 20.3 37.7 46.5 48.3 74.5-5.2 1.1-10.4 1.9-15.6 3.1-9.5 2.1-15.5 11.6-13.4 21.1 2.1 9.5 11.6 15.4 21.1 13.3 4.8-1.1 9.6-1.9 14.4-2.8-0.3 9.2-2.3 18.5-6.6 27.6-2.7 3.9-5.4 7-8 9.2-89.3 75.6-152.9 170-188.8 265.9-35.6 94.9-38.1 133.8-37.6 165.4 0.7 43.3 2.5 158.2 207.3 161.2 182.7 2.7 205.9 2 319.5 0.7 204.5-2.2 206.2-118.3 206.9-162 0.1-31.8-2.4-70.7-38-165.5zM359.1 204.4c-3.4-4.2-6.6-8.2-10.4-12.9-14.3-15.6-21.4-50.4-24.5-67.3 1.4-0.1 2.9-0.3 4.3-0.6 1.3-0.3 3.7-0.6 8-0.6 11 0 27.1 2.2 44.2 4.5 21.2 2.8 45.3 6.1 68.4 6.5h2.5c27.1 0 48.3-8.9 67-16.8 16.9-7.1 31.1-13.2 47.7-12 21.2 1.5 37.6 13.2 55 25.5 11.6 8.3 23.6 16.8 37.6 22.7 20.2 8.6 47 3.9 64.8-1.9-0.1 0.3-0.2 0.7-0.3 1-5.1 15.7-36.4 38.8-93.1 83.5-4.9 3.9-8.6 6.8-10.6 8.5-5.9 5-20.3 16-28.7 37.3-51.7-8.1-112.2-7.2-175.7 2.6-12.1-36-37.7-57.2-56.2-80z m267.6 135.2c-3.1-3.8-5-7.3-5.9-12.3 0.1 0 0.2 0.1 0.4 0.1 1.2 4.4 3 8.5 5.5 12.2z m217.1 456.3c-0.7 43.8-1.9 122.2-172 124.1-99.8 1.1-112.5 2.4-318.6-0.7-170.6-2.5-171.9-80-172.5-123.4-0.4-28.3 1.9-63.4 35.4-152.5C249.9 553.2 310 463.7 394.7 392c5.2-4.4 10.3-10.2 15.1-17.3 0.4-0.6 0.8-1.3 1.2-2 8.6-17.2 11.7-34.2 11-50.6 58.9-8.9 115.4-9.8 162.9-2.5 0 1.4-0.2 2.6-0.1 4 1.7 26.4 12.7 37.3 24.3 48.8 2.7 2.7 5.6 5.6 8.8 9 0.6 0.6 1.2 1.2 1.8 1.7 3.6 3 6.9 5.8 9.5 8.2 14 13.3 137.8 141 179.4 252.1 33.3 89.2 35.6 124.2 35.2 152.5zM520.9 627.3v-98.2c22.3 4.6 42.4 15.1 58.6 32.9l22.4-27.3c-20.5-21.3-47.3-35.6-81-40v-41.9h-19.5v0.4h-17.1v39.9c-53.8 4-91.2 36.8-91.2 82.9 0 55.1 45.5 70.4 91.2 82.9v108.9c-35.4-4-61.2-22-78.2-42.1l-22.4 28.7c22.4 25.5 55.4 44.4 100.6 47.1v40.2h29.5v-0.3h7.1v-41c63.8-7.4 87.8-47.5 87.8-86.4 0-55.7-43.8-73.8-87.8-86.7z m-36.6-9.2c-30.5-9-52.7-19.7-52.7-44.4 0-26 20.9-44.8 52.7-47.1v91.5zM520.9 767v-98.6c28 9.1 49.2 21.5 49.2 48.4 0.1 20.1-12.3 43.7-49.2 50.2z" p-id="4428" fill="#d81e06"></path></svg>
                <font color="red" font-size="12">{{scope.row.product.price}}</font>元</span>    
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
        </el-table>
      </template>
    </div>
 
    <!-- 卡片 -->
    <el-card class="order-card" shadow="always">
        <div slot="header" class="clearfix">
          <span>订单基本信息</span>
        </div>
        <div>
          <span>订单编号:{{data.id}}</span>
          <br/>
          订单金额:<svg t="1624619356606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4427" width="20" height="18"><path d="M841.5 631.1c-43.2-115.2-162.5-240.7-187.8-265l-0.9-0.9c-3-2.7-6.2-5.5-9.8-8.4-2.7-2.9-5.2-5.4-7.5-7.8 7.7 6.4 17.5 10.4 28.4 10.4 17.4 0 32.3-10.1 39.7-24.6 25.9 5.2 93.8 20 102.7 57.2 2.1 8.8 10 14.7 18.7 14.7 1.5 0 3-0.2 4.5-0.5 10.3-2.5 16.7-12.8 14.2-23.2-11.2-46.5-62.6-68-101.7-78.7 18.5-17.3 35.1-39.3 37-54.6 1.3-10.2-5.8-19-16-20.7-10.2-1.7-20 5.6-22.1 15.7-2.1 10-26.2 34.6-40.3 44.7-8.1-11.6-21.5-19.3-36.7-19.3-13.4 0-25.3 6-33.5 15.4 4.7-7 9.7-11.8 12.2-14 1.8-1.6 5.2-4.2 9.6-7.7 48.8-38.4 95.3-70.6 104.9-100.3 2.7-8.2 4.5-13.5 5.8-17 1.9-5.4 7.5-21.2-6.9-28.5-2.9-3.1-8.1-6.8-16.4-6.8-6.5 0-13 2.2-21.3 5-13.8 4.7-33 10-45.4 4.8-10.4-4.4-20.4-11.5-30.9-19-19.6-13.9-41.8-29.8-72.9-32-24.7-1.8-44.8 6.6-64 14.7-17.1 7.2-33.2 14-54.9 14h-0.1c-21.1-0.4-44.1-3.5-64.4-6.2-19.1-2.6-35.6-4.8-48.9-4.8-5.6 0-10.3 0.4-13.4 1.1-2-1.6-5.1-5.4-9.1-11.3-3.1-4.6-7.9-11.6-17.7-11.6-5.5 0-10.9 2.7-14.2 7.1-5.8 7.7-5.5 9 4.2 43.2l1.4 4.9c0.3 1.1 0.6 3.1 1.1 5.8 3.4 19.2 11.5 56.8 33 80.2 3 3.8 6.3 7.9 9.9 12.3 16.5 20.3 37.7 46.5 48.3 74.5-5.2 1.1-10.4 1.9-15.6 3.1-9.5 2.1-15.5 11.6-13.4 21.1 2.1 9.5 11.6 15.4 21.1 13.3 4.8-1.1 9.6-1.9 14.4-2.8-0.3 9.2-2.3 18.5-6.6 27.6-2.7 3.9-5.4 7-8 9.2-89.3 75.6-152.9 170-188.8 265.9-35.6 94.9-38.1 133.8-37.6 165.4 0.7 43.3 2.5 158.2 207.3 161.2 182.7 2.7 205.9 2 319.5 0.7 204.5-2.2 206.2-118.3 206.9-162 0.1-31.8-2.4-70.7-38-165.5zM359.1 204.4c-3.4-4.2-6.6-8.2-10.4-12.9-14.3-15.6-21.4-50.4-24.5-67.3 1.4-0.1 2.9-0.3 4.3-0.6 1.3-0.3 3.7-0.6 8-0.6 11 0 27.1 2.2 44.2 4.5 21.2 2.8 45.3 6.1 68.4 6.5h2.5c27.1 0 48.3-8.9 67-16.8 16.9-7.1 31.1-13.2 47.7-12 21.2 1.5 37.6 13.2 55 25.5 11.6 8.3 23.6 16.8 37.6 22.7 20.2 8.6 47 3.9 64.8-1.9-0.1 0.3-0.2 0.7-0.3 1-5.1 15.7-36.4 38.8-93.1 83.5-4.9 3.9-8.6 6.8-10.6 8.5-5.9 5-20.3 16-28.7 37.3-51.7-8.1-112.2-7.2-175.7 2.6-12.1-36-37.7-57.2-56.2-80z m267.6 135.2c-3.1-3.8-5-7.3-5.9-12.3 0.1 0 0.2 0.1 0.4 0.1 1.2 4.4 3 8.5 5.5 12.2z m217.1 456.3c-0.7 43.8-1.9 122.2-172 124.1-99.8 1.1-112.5 2.4-318.6-0.7-170.6-2.5-171.9-80-172.5-123.4-0.4-28.3 1.9-63.4 35.4-152.5C249.9 553.2 310 463.7 394.7 392c5.2-4.4 10.3-10.2 15.1-17.3 0.4-0.6 0.8-1.3 1.2-2 8.6-17.2 11.7-34.2 11-50.6 58.9-8.9 115.4-9.8 162.9-2.5 0 1.4-0.2 2.6-0.1 4 1.7 26.4 12.7 37.3 24.3 48.8 2.7 2.7 5.6 5.6 8.8 9 0.6 0.6 1.2 1.2 1.8 1.7 3.6 3 6.9 5.8 9.5 8.2 14 13.3 137.8 141 179.4 252.1 33.3 89.2 35.6 124.2 35.2 152.5zM520.9 627.3v-98.2c22.3 4.6 42.4 15.1 58.6 32.9l22.4-27.3c-20.5-21.3-47.3-35.6-81-40v-41.9h-19.5v0.4h-17.1v39.9c-53.8 4-91.2 36.8-91.2 82.9 0 55.1 45.5 70.4 91.2 82.9v108.9c-35.4-4-61.2-22-78.2-42.1l-22.4 28.7c22.4 25.5 55.4 44.4 100.6 47.1v40.2h29.5v-0.3h7.1v-41c63.8-7.4 87.8-47.5 87.8-86.4 0-55.7-43.8-73.8-87.8-86.7z m-36.6-9.2c-30.5-9-52.7-19.7-52.7-44.4 0-26 20.9-44.8 52.7-47.1v91.5zM520.9 767v-98.6c28 9.1 49.2 21.5 49.2 48.4 0.1 20.1-12.3 43.7-49.2 50.2z" p-id="4428" fill="#d81e06"></path></svg>
          <font color="red">{{data.total}}</font>元
          <br/>
          下单时间:{{data.orderTime}}
          <br/>
          订单状态:{{data.status}}
        </div>
      </el-card>
      
      <el-card class="emp-card" shadow="always" v-if="data.status ==='待服务' || data.status ==='已完成'" >
        <div slot="header" class="clearfix">
          <span>接单者信息</span>
        </div>
        <div>
          <span>接单者:{{user.username}}</span>
          <br/>
          接单者手机号:{{user.telephone}}
        </div>
      </el-card>
      
      <el-card class="cus-card" shadow="always">
        <div slot="header" class="clearfix">
          <span>下单者信息</span>
        </div>
        <div>
          下单者:{{datacard.realname}}
          <br/>
          下单者手机号:{{datacard.telephone}}
        </div>
      </el-card>
      
       <el-card class="add-card" shadow="always">
        <div slot="header" class="clearfix">
          <span>雇主信息</span>
        </div>
        <div>
          <span>雇主:{{addressdata.username}}</span>
          <br/>
          手机号:{{addressdata.telephone}}
          <br/>
          服务地址:{{addressdata.city}}{{addressdata.area}}{{addressdata.address}}
        </div>
      </el-card>
      
  </div>
</template>

<script>
import { findById } from '@/api/order'
export default {
  data() {
    return {
      tableData:[],
      data:[],
      datacard:[],
      user:[],
      addressdata:[],
      params:{
        page:1,
        pageSize:10
      },
      id:'',
    };
  },
  computed: {},
  methods: {
    async findById(){
      const res =  await findById({id:this.id})
      // console.log(res)
      
      
      this.data = res.data
      this.datacard = this.data.customer
      this.user = this.data.employee
      this.addressdata = this.data.address
      this.tableData = this.data.orderLines

    }
  },
  created() {
    this.id = this.$route.query.id;
    this.findById()
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.main{
   margin-top:30px;
}
   .order-card{
     width: 22%;
     height: 100%;
     font-size: 10;
     line-height:30px;
     float: left;
     margin-top: 30px;
   }
   .cus-card{
     width: 22%;
     height: 100%;
     font-size: 10;
     line-height:30px;
     float: left;
     margin-left: 20px;
     margin-top: 30px;

   }
   .add-card{
     width: 22%;
     height: 100%;
     font-size: 10;
     line-height:30px;
     float: left;
     margin-left: 20px;
     margin-top: 30px;
     
   }
   .emp-card{
     width: 22%;
     height: 100%;
     font-size: 10;
     line-height:30px;
     float: left;
     margin-left: 20px;
     margin-top: 30px;

   }
   
</style>